<template>
  <div class="chartContainer">
    <!-- 出租关系标题 -->
    <div class="rentTitle">
      <p>出租承租信息</p>
    </div>
    <el-collapse v-model="activeNames" accordion>
      <div v-for="(rent, index) in RentData" :key="rent">
        <el-collapse-item :title="rent.rentName" :name="index">
          <div v-for="data in rent.data" :key="data" class="collapseContext">
            <span class="key">{{ data.key }}</span>
            <span>:</span>
            <span class="value">{{ data.value }}</span>
            <span class="unit">{{ data.unit }}</span>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>

<script>
/*eslint-disable */
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue-demi";

export default {
  name: "RentData",
  data() {
    return { RentData: [], activeNames: [] };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let subList = [];
    let unitList = ["", "", "m²", "元", "", "", "", "", "", "", ""];
    let keyList = [
      "出租人",
      "承租人",
      "出租面积",
      "月租金",
      "出租类型",
      "土地性质",
      "地址",
      "楼栋性质",
      "租赁用途",
      "租赁开始日期",
      "租赁结束日期",
    ];

    onMounted(() => {
      subscribeList();
    });

    function subscribeList() {
      // 出租数据传入
      subList[0] = pubsub.subscribe("RentDataInput", (n, data) => {
        RentDataInput(data);
      });
    }

    //出租关系数据填入
    function RentDataInput(data) {
      let index = 0;
      data.forEach((element) => {
        let arr = [];
        // 数据项载入
        for (let i = 0; i < keyList.length; i++) {
          if (keyList[i] === "地址") {
            arr.push({
              key: keyList[i],
              value: element[keyList[i]].split("村")[1],
              unit: unitList[i],
            });
          } else {
            arr.push({
              key: keyList[i],
              value: element[keyList[i]],
              unit: unitList[i],
            });
          }
        }
        proxy.RentData.push({
          rentName: element["出租人"] + "-" + element["承租人"],
          data: arr,
          index: index,
        });
        index++;
      });
      setTimeout(() => {
        proxy.activeNames = [0];
      }, 500);
    }

    return { subList };
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.el-collapse {
  max-height: 93.5%;
  overflow-y: scroll;
}
.el-collapse::-webkit-scrollbar {
  width: 5px;
}
.el-collapse::-webkit-scrollbar-thumb {
  background: #029032;
  border-radius: 50px;
}
.el-collapse::-webkit-scrollbar-track {
  background: rgb(190, 190, 190);
}

.collapseContext {
  padding: 1.5% 0%;
  padding-left: 3.3%;
  > span {
    font-size: 150%;
    font-weight: bold;
    color: white;
  }
  > .key {
    color: white;
    background-color: #029032;
    border-radius: 10px;
    font-size: 150%;
    font-weight: bold;
    padding: 1% 2.5%;
  }
  > .value {
    font-family: "Agency FB";
    font-size: 210%;
    color: white;
    margin-left: 1.5%;
    font-weight: normal;
  }
  > .unit {
    color: white;
    font-size: 150%;
    margin-left: 2%;
    font-weight: normal;
  }
}
.collapseContext:last-child {
  border-bottom: transparent;
}
.chartContainer {
  height: 66%;
}
.rentTitle {
  background-image: ~"url(@{app-images-root}/button_bg6.png)";
  background-size: 100% 100%;
  width: 90%;
  margin-top: 2%;
  > p {
    font-size: 170%;
    font-weight: bold;
    margin-left: 6%;
    padding-bottom: 1.5%;
    color: white;
  }
}

.el-collapse-item {
  background-color: transparent;
}
</style>